<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { loginMethods } from '../data/mockData.js';

const router = useRouter();
const activeTab = ref('phone'); // 默认为手机号登录
const isLoading = ref(false);
const errorMessage = ref('');

// 表单数据
const formData = {
  phone: '',
  verifyCode: '',
  qq: '',
  qqPassword: '',
  wechat: '',
  wechatPassword: ''
};

// 切换登录方式
const switchTab = (tab) => {
  activeTab.value = tab;
  errorMessage.value = '';
};

// 发送验证码
const sendVerifyCode = () => {
  if (!formData.phone) {
    errorMessage.value = '请输入手机号';
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
    errorMessage.value = '请输入正确的手机号';
    return;
  }
  
  errorMessage.value = '';
  // 模拟发送验证码
  setTimeout(() => {
    alert('验证码已发送到您的手机，请注意查收');
  }, 1000);
};

// 处理登录
const handleLogin = async () => {
  errorMessage.value = '';
  isLoading.value = true;
  
  try {
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 简单的表单验证
    if (activeTab.value === 'phone') {
      if (!formData.phone || !formData.verifyCode) {
        throw new Error('请填写完整信息');
      }
    } else if (activeTab.value === 'qq') {
      if (!formData.qq || !formData.qqPassword) {
        throw new Error('请填写完整信息');
      }
    } else if (activeTab.value === 'wechat') {
      if (!formData.wechat || !formData.wechatPassword) {
        throw new Error('请填写完整信息');
      }
    }
    
    // 登录成功，存储用户信息到本地存储
    const userInfo = {
      id: 1,
      name: activeTab.value === 'phone' ? `用户${formData.phone.slice(-4)}` : 
            activeTab.value === 'qq' ? `QQ用户${formData.qq.slice(-4)}` : 
            `微信用户${formData.wechat.slice(-4)}`,
      avatar: `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/200/200`,
      loginMethod: activeTab.value
    };
    
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
    localStorage.setItem('isLoggedIn', 'true');
    
    // 登录成功后的处理
    alert('登录成功！');
    router.push('/');
  } catch (error) {
    errorMessage.value = error.message || '登录失败，请重试';
  } finally {
    isLoading.value = false;
  }
};

// 第三方登录模拟
const thirdPartyLogin = (method) => {
  isLoading.value = true;
  
  // 模拟第三方登录流程
  setTimeout(() => {
    alert(`即将跳转到${method}授权页面...`);
    // 模拟授权成功
    setTimeout(() => {
      const userInfo = {
        id: 1,
        name: `${method}用户`,
        avatar: `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/200/200`,
        loginMethod: method.toLowerCase()
      };
      
      localStorage.setItem('userInfo', JSON.stringify(userInfo));
      localStorage.setItem('isLoggedIn', 'true');
      
      alert('登录成功！');
      router.push('/');
      isLoading.value = false;
    }, 2000);
  }, 1000);
};

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register');
};

// 关闭登录框（返回首页）
const closeLogin = () => {
  router.push('/');
};
</script>

<template>
  <div class="login-page">
    <!-- 背景遮罩层 -->
    <div class="login-overlay" @click="closeLogin"></div>
    
    <!-- 登录弹窗 -->
    <div class="login-container">
      <!-- 关闭按钮 -->
      <button class="close-btn" @click="closeLogin">×</button>
      
      <!-- 登录标题 -->
      <div class="login-header">
        <h2 class="login-title">登录威海旅游</h2>
        <p class="login-subtitle">欢迎回来，请选择登录方式</p>
      </div>
      
      <!-- 错误提示 -->
      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>
      
      <!-- 登录方式标签页 -->
      <div class="login-tabs">
        <button 
          v-for="method in loginMethods" 
          :key="method.key"
          class="login-tab"
          :class="{ active: activeTab === method.key }"
          @click="switchTab(method.key)"
        >
          <span class="tab-icon">{{ method.icon }}</span>
          <span class="tab-text">{{ method.name }}</span>
        </button>
      </div>
      
      <!-- 登录表单 -->
      <div class="login-form">
        <!-- 手机号登录 -->
        <div v-if="activeTab === 'phone'" class="form-content">
          <div class="form-group">
            <label for="phone" class="form-label">手机号码</label>
            <input 
              type="tel" 
              id="phone" 
              v-model="formData.phone"
              class="form-input"
              placeholder="请输入手机号码"
              maxlength="11"
            >
          </div>
          <div class="form-group">
            <label for="verifyCode" class="form-label">验证码</label>
            <div class="verify-code-wrapper">
              <input 
                type="text" 
                id="verifyCode" 
                v-model="formData.verifyCode"
                class="form-input verify-code-input"
                placeholder="请输入验证码"
                maxlength="6"
              >
              <button 
                type="button" 
                class="send-code-btn"
                @click="sendVerifyCode"
              >
                发送验证码
              </button>
            </div>
          </div>
        </div>
        
        <!-- QQ登录 -->
        <div v-if="activeTab === 'qq'" class="form-content">
          <div class="form-group">
            <label for="qq" class="form-label">QQ账号</label>
            <input 
              type="text" 
              id="qq" 
              v-model="formData.qq"
              class="form-input"
              placeholder="请输入QQ账号"
            >
          </div>
          <div class="form-group">
            <label for="qqPassword" class="form-label">QQ密码</label>
            <input 
              type="password" 
              id="qqPassword" 
              v-model="formData.qqPassword"
              class="form-input"
              placeholder="请输入QQ密码"
            >
          </div>
        </div>
        
        <!-- 微信登录 -->
        <div v-if="activeTab === 'wechat'" class="form-content">
          <div class="form-group">
            <label for="wechat" class="form-label">微信账号</label>
            <input 
              type="text" 
              id="wechat" 
              v-model="formData.wechat"
              class="form-input"
              placeholder="请输入微信账号"
            >
          </div>
          <div class="form-group">
            <label for="wechatPassword" class="form-label">微信密码</label>
            <input 
              type="password" 
              id="wechatPassword" 
              v-model="formData.wechatPassword"
              class="form-input"
              placeholder="请输入微信密码"
            >
          </div>
        </div>
        
        <!-- 登录按钮 -->
        <button 
          type="button" 
          class="login-btn btn-primary"
          :disabled="isLoading"
          @click="handleLogin"
        >
          <span v-if="!isLoading">登录</span>
          <span v-else>登录中...</span>
        </button>
        
        <!-- 其他操作 -->
        <div class="login-actions">
          <button type="button" class="register-link" @click="goToRegister">
            还没有账号？立即注册
          </button>
        </div>
      </div>
      
      <!-- 第三方登录 -->
      <div class="third-party-login">
        <div class="divider">
          <span>其他登录方式</span>
        </div>
        <div class="third-party-buttons">
          <button 
            type="button" 
            class="third-party-btn"
            @click="thirdPartyLogin('QQ')"
            title="QQ登录"
          >
            <span class="third-party-icon">💬</span>
          </button>
          <button 
            type="button" 
            class="third-party-btn"
            @click="thirdPartyLogin('微信')"
            title="微信登录"
          >
            <span class="third-party-icon">💚</span>
          </button>
          <button 
            type="button" 
            class="third-party-btn"
            @click="thirdPartyLogin('微博')"
            title="微博登录"
          >
            <span class="third-party-icon">🔵</span>
          </button>
        </div>
      </div>
      
      <!-- 隐私协议 -->
      <div class="privacy-policy">
        登录即表示同意
        <a href="#" class="privacy-link">《用户服务协议》</a>
        和
        <a href="#" class="privacy-link">《隐私政策》</a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
}

.login-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.login-container {
  position: relative;
  width: 100%;
  max-width: 450px;
  background-color: var(--background-primary);
  border-radius: var(--border-radius);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease-out;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.close-btn:hover {
  background-color: var(--background-secondary);
  color: var(--text-primary);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.login-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.error-message {
  background-color: #fee;
  color: #c33;
  padding: 12px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  font-size: 14px;
  text-align: center;
  animation: shake 0.5s ease-in-out;
}

.login-tabs {
  display: flex;
  background-color: var(--background-secondary);
  border-radius: var(--border-radius);
  padding: 5px;
  margin-bottom: 30px;
}

.login-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  border-radius: calc(var(--border-radius) - 5px);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.login-tab:hover {
  color: var(--primary-color);
}

.login-tab.active {
  background-color: var(--background-primary);
  color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.tab-icon {
  font-size: 20px;
}

.login-form {
  margin-bottom: 30px;
}

.form-content {
  margin-bottom: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 16px;
  color: var(--text-primary);
  background-color: var(--background-primary);
  transition: var(--transition);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
}

.verify-code-wrapper {
  display: flex;
  gap: 12px;
}

.verify-code-input {
  flex: 1;
}

.send-code-btn {
  padding: 12px 20px;
  background-color: var(--ocean-light);
  color: var(--ocean-dark);
  border: none;
  border-radius: var(--border-radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  min-width: 120px;
}

.send-code-btn:hover {
  background-color: var(--ocean-medium);
}

.login-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.login-actions {
  text-align: center;
}

.register-link {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.register-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.third-party-login {
  margin-bottom: 20px;
}

.divider {
  position: relative;
  height: 1px;
  background-color: var(--border-color);
  margin-bottom: 20px;
}

.divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--background-primary);
  padding: 0 20px;
  font-size: 14px;
  color: var(--text-secondary);
}

.third-party-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.third-party-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: var(--background-primary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.third-party-btn:hover {
  background-color: var(--background-secondary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.third-party-icon {
  font-size: 24px;
}

.privacy-policy {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.privacy-link {
  color: var(--primary-color);
  text-decoration: none;
}

.privacy-link:hover {
  text-decoration: underline;
}

/* 动画效果 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    max-width: 90%;
    padding: 30px 25px;
    margin: 20px;
  }
  
  .login-title {
    font-size: 24px;
  }
  
  .login-tabs {
    flex-direction: column;
    gap: 5px;
  }
  
  .login-tab {
    padding: 10px;
  }
  
  .verify-code-wrapper {
    flex-direction: column;
  }
  
  .send-code-btn {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 25px 20px;
  }
  
  .login-header {
    margin-bottom: 25px;
  }
  
  .login-title {
    font-size: 22px;
  }
  
  .login-subtitle {
    font-size: 14px;
  }
  
  .form-input {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  .third-party-buttons {
    gap: 15px;
  }
  
  .third-party-btn {
    width: 45px;
    height: 45px;
  }
  
  .third-party-icon {
    font-size: 20px;
  }
}
</style>